<template>
	<div class="bookedit">
		<el-row justify="space-between" style="margin-top: 2rem;">
			<el-col><h1>{{headTitle}}</h1></el-col>
		</el-row>
		<el-form ref="from">
			<el-row class="from-item">
				<label>商品序号：</label>
				<el-input style="width: 80%;" v-model.lazy.trim="forms.sn"></el-input>
			</el-row>
			<el-row class="from-item">
				<label>商品名称：</label>
				<el-input style="width: 80%;" v-model.lazy.trim="forms.name"></el-input>
			</el-row>
			<el-row class="from-item">
				<label>商品价格：</label>
				<el-input style="width: 80%;" v-model.lazy.trim="forms.price"></el-input>
			</el-row>
			<el-row class="from-item">
				<label>商品厂商：</label>
				<el-input style="width: 80%;" v-model.lazy.trim="forms.author"></el-input>
			</el-row>
			<el-row class="from-item">
				<label>商品出处：</label>
				<el-input style="width: 80%;" v-model.lazy.trim="forms.publisher"></el-input>
			</el-row>
			<el-row class="from-item">
				<label>出厂时间：</label>
				<el-input style="width: 80%;" type="date" v-model.lazy.trim="forms.tpublish"></el-input>
			</el-row>
			<el-row class="from-item">
				<label>商品类型：</label>
				<el-cascader
				  v-model="forms.bookType.id"
				  :options="newMenu"
				></el-cascader>
			</el-row>
			<el-row>
				<img v-if="forms.picture" :src="`${$ServerUrl}/api/public/showImg/${forms.picture}`">
				<img src="" v-else/>
				<input type="file" ref="pic"/>
			</el-row>
		</el-form>
		<el-row justify="space-between" style="margin-top: 30px;">
		<el-col :span="5"><el-button @click="$router.push({name:'book'})">返回列表</el-button></el-col>
		<el-col :span="5"><el-button type="primary" @click="putdata()">提交</el-button></el-col>
		</el-row>
	</div>
</template>

<script>
import { ElMessage } from 'element-plus';
export default{
	name:'BookEdit',
	data(){
		return {
			headTitle:'商品添加',
			types:[],//原菜单
			newMenu:[],//多级菜单
			bookid:null,
			imgUrl:null,
			forms:{
				id: 0,
				name:"",
				sn: '',
				author: "",
				publisher: "",
				tpublish: '',
				bookType:{
					id:0
				},
				picture: '',
				price: ''
			}
		}
	},
	methods:{
		putdata(){
			let bookID = this.forms.bookType.id.length;
			if(bookID==undefined){
				bookID = this.forms.bookType.id;
			}else{
				bookID = this.forms.bookType.id[this.forms.bookType.id.length-1];
			}
			if(bookID<0 || bookID==undefined){
				this.PushMsg('error','请选择商品类型');
				return false;
			}
			let params = new FormData();
			let pic = this.$refs.pic.files[0];
			if(pic)params.append('pic',pic,pic.name);
			params.append('id',this.forms.id);
			params.append('name',this.forms.name);
			params.append('sn',this.forms.sn);
			params.append('author',this.forms.author);
			params.append('picture',this.forms.picture);
			params.append('publisher',this.forms.publisher);
			params.append('bookType.id',bookID);
			params.append('price',this.forms.price);
			params.append('tpublish',this.forms.tpublish);
			this.axios.post('/api/adm/book/addBook',params).then((res)=>{
				this.PushMsg('success',res.data.msg);
				this.forms.picture = res.data.data.book.picture;
			}).catch((err)=>{
				//console.log(err);
			});
		},
		//弹出消息提示
		PushMsg(type,message){
			if(type=='error'){
				ElMessage.error({
					message: message,
				})
			}else{
				ElMessage({
					message: message,
					type: type,
				})
			}
			
		},
		toNum(t){
			return t>=10 ? t: '0'+t;
		},
		//多级菜单格式化
		getMenu(id,arr){
			if(id===0){
				//第一级菜单
				this.types.forEach(item=>{
					if(item.pid===0){
						let temp = {value:item.id,label:item.type}
						arr.push(temp)
					}
				})
				//再第一级菜单完成之后，从第一级的第一个菜单进入
				this.getMenu(this.newMenu[0].id,this.newMenu)
			}else{
				//其他他等级的菜单
				//1.循环等级数组，给每个第一级找到第二级
				arr.forEach((item,i)=>{
					//2.将list整个循环，将每一条数据都给等级作比较
					this.types.forEach((val,k)=>{
						//判断父级的id === 数据的pid
						if(item.value === val.pid){
							//声明一个下一维度的数组
							if(!item.children)item.children = [];
							item.children.push({value:val.id,label:val.type});
						}
					})
					if(item.children){
						this.getMenu(1,item.children);
					}
				})
			} 
		}
	},
	created() {
		this.axios.get('/api/adm/type/findAll2').then((res)=>{
			this.types = res.data.data;
			this.getMenu(0,this.newMenu);
		}).catch((err)=>{
			//console.log(err);
		});
		
		//获取通过url传递过来的书本ID，如果该值不为空表示当前页面为书本更新，否则为新添加书本
		this.bookid = this.$route.query.bookid;
		if(this.bookid){
			this.headTitle = '修改商品';
			this.axios.get('/api/adm/book/findById/'+this.bookid).then((res)=>{
				this.forms = res.data.data;
				//出厂时间格式化
				if(this.forms.tpublish){
					let now = new Date(this.forms.tpublish);
					let year = now.getFullYear();
					let month = this.toNum(now.getMonth() + 1);
					let date = this.toNum(now.getDate())
					this.forms.tpublish = `${year}-${month}-${date}`;
				}
			}).catch((err)=>{
				//console.log(err);
			});
		}
	}
}
</script>

<style scoped>
.bookedit{
	width: 90%;
	margin: 0 auto;
}
.bookedit .from-item label{
	line-height: 30px;
	width: 80px
}

.bookedit .el-form .from-item{
	margin: 15px 0;
}
.bookedit .el-form .el-row img{
	margin-right: 20px;
	width: 7rem;
	height: 7rem;
	border: 1px solid #c0c4cc;
}
</style>
